<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <meta charset="utf-8" /> 
  <title>微信图文编辑器,微信图文美化编辑器</title> 
  <meta name="ROBOTS" content="INDEX,FOLLOW" /> 
  <meta name="Keywords" content="微信图文编辑器，微信图文美化编辑器，图文美化编辑器，最方便的微信编辑器" /> 
  <meta name="Description" content="微信图文美化编辑器提供美化微信图文消息的功能，有非常多漂亮的样式，可直接插入编辑区域然后修改文字即可，轻松编辑非常美观的微信图文消息。" /> 
  <!--[if lt IE 9]>
        <script type="text/javascript" src="/js/html5shiv.js"></script>
        <script type="text/javascript" src="/js/respond.min.js"></script>
    <![endif]--> 
  <link href="/sites/all/modules/wxeditor/beautify_editor_files/bootstrap_2.css" rel="stylesheet" type="text/css" /> 
  <link rel="stylesheet" type="text/css" href="/sites/all/modules/wxeditor/beautify_editor_files/font-awesome.min.css" /> 
  <link rel="stylesheet" type="text/css" href="/sites/all/modules/wxeditor/beautify_editor_files/ui-customer.css" /> 
  <link rel="stylesheet" type="text/css" href="/sites/all/modules/wxeditor/beautify_editor_files/jquery.jgrowl.css" /> 
  <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/jquery.min.js"></script> 
  <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/jquery.cookie.js"></script> 
  <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/language-zh-CN.js"></script> 
  <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/bootstrap.min.js"></script> 
  <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/front.js"></script> 
  <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/common.js"></script> 
  <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/jquery.jgrowl.min.js"></script> 
  <!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="/css/bootstrap-ie6.css" />
        <script type="text/javascript" src="/js/jquery/jquery-migrate-1.2.1.min.js"></script>
    <![endif]--> 
  <script type="text/javascript">
        var BASEURL = "";
        var ADMIN_BASEURL = BASEURL+"/manage";
    </script> 
  <style type="text/css">
    .cke{visibility:hidden;}
    .footer-top{display: none;}

    #left-sidebar .ui-portlet{margin:0px;}
    #left-side-affix{box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
    #left-sidebar .btn-group .btn{padding:4px 16px;}
    ul.editor-style-list li,ul.editor-template-list li{
        cursor: pointer;padding:5px 5px;border-top:1px solid #EFEFEF;
    }
    ul.editor-style-list li img,ul.editor-template-list li img {
        max-width: 100%;
    }
    .editor-style-list li:hover,.editor-template-list li:hover{
        background-color:#efefef;
    }
    .editor-template-list .mix{display: none;}
    .cke_reset_all, .cke_reset_all *{
        position: initial;
    }
    .affix{top:0px;background-color:#FFF;z-index:100;position: fixed;}
    .col-xs-6 {width: 49%;}
    .color-swatch{width:30px;height:30px;border-radius: 15px;cursor: pointer;float: left;margin:4px 2px;
        box-shadow: 1px 1px 3px #5b616d inset, 2px 2px 4px #fff;
    }
    .color-swatch:hover,.color-swatch.active {  
    -webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);
    -o-transform:scale(1.1);transform:scale(1.1);
    -webkit-box-shadow:inset 1px 1px 3px #5b616d,0 0 10px #45bcda;
    -moz-box-shadow:inset 1px 1px 3px #5b616d,0 0 10px #45bcda;
    box-shadow:inset 1px 1px 3px #5b616d,0 0 10px #45bcda;
    }
    </style> 
    <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/ckeditor.js"></script> 
  <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/js/ckeditor/front-config.js"></script> 
  <link rel="stylesheet" type="text/css" href="/sites/all/modules/wxeditor/beautify_editor_files/editor.css" /> 
  <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/zh-cn.js"></script> 
  <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/styles.js"></script> 
  <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/plugin.js"></script> 
</head>
 <body class="boxed"> 
  <div id="maincontent" class="maincontent clearfix"> 
   <div class="container" style="margin-top:10px;"> 
    <div class="row"> 

    <!--[if lt IE 9]>
      alert("温馨提醒：请使用谷歌浏览器已获得最佳体验。");
    <![endif]--> 
     <div id="left-sidebar" class="col-sm-6 hidden-xs hidden-print"> 
      <div id="left-side-affix" data-spy="affix" data-offset-top="110" style="width: 475px;" class="affix-top"> 
       <ul class="nav nav-tabs" role="tablist"> 
        <li class="active"><a href="/beautify_editor.html#editor-templates" role="tab" data-toggle="tab">插入内容</a></li> 
        <li><a href="/beautify_editor.html#editor-styles" role="tab" data-toggle="tab">格式刷</a></li> 
       </ul> 
       <!-- Tab panes --> 
       <div class="tab-content"> 
        
      <?php include 'wx_block.tpl.php'; ?>

       </div> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <form action="" class="form-horizontal" role="form" target="_blank" id="WxMsgViewForm" method="post" accept-charset="utf-8"> 
       <div class="form-group" id="divWxMsgContent"> 
        <div class="col-sm-12 controls"> 
         <textarea name="content" class="form-control" rows="3" cols="30" id="WxMsgContent" style="visibility: hidden; display: none;"></textarea>
         <p>将编辑好的内容全选复制到微信编辑后台。</p> 
         <input type="button" class="btn btn-primary" id="copy-editor-html" value="复制内容" /> 
         <input type="button" class="btn btn-danger" id="clear-editor" value="清空内容" /> 
        </div> 
       </div> 
      </form> 
     </div> 
     <div style="clear:both;"></div> 
    </div> 
    <section style="width:120px;position:fixed;top:120px;right:0px;height:320px;"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading">
       <h3 class="panel-title">配色方案</h3>
      </div> 
      <div class="panel-body"> 
       <ul class="row" style="list-style:none;padding:0 5px"> 
        <li class="color-swatch" style="background-color: rgb(192, 0, 0);"></li> 
        <li class="color-swatch" style="background-color: rgb(255, 129, 36);"></li> 
        <li class="color-swatch" style="background-color: #f96e57;"></li> 
        <li class="color-swatch" style="background-color: rgb(71, 193, 168);"></li> 
        <li class="color-swatch" style="background-color: rgb(142, 201, 101);"></li> 
        <li class="color-swatch" style="background-color: rgb(141, 225, 163);"></li> 
        <li class="color-swatch" style="background-color: rgb(255, 202, 0);"></li> 
        <li class="color-swatch" style="background-color: rgb(95, 156, 239);"></li> 
        <li class="color-swatch" style="background-color: rgb(166, 91, 203);"></li> 
        <li class="color-swatch" style="background-color: rgb(190, 119, 99);"></li> 
        <li class="color-swatch" style="background-color: rgb(255, 175, 205);"></li> 
        <li class="color-swatch" data-color="#efefef" style="clear:left;background-color: rgb(0, 1, 2);"></li> 
        <li class="color-swatch" style="background-color: rgb(162, 161, 160);"></li> 
       </ul> 
       <hr style="margin:2px;" /> 
       <ul class="row" style="list-style:none;padding:0 5px" title="浅色颜色不支持全文调色，选选择要调色的部分内容或者全选内容"> 
        <li class="color-swatch" data-change="select" data-color="#666" style="background-color: rgb(216, 215, 200);"></li> 
        <li class="color-swatch" data-change="select" data-color="#666" style="background-color: rgb(219, 238, 243);"></li> 
        <li class="color-swatch" data-change="select" data-color="#666" style="background-color: #faebff"></li> 
        <li class="color-swatch" data-change="select" data-color="#666" style="background-color: #fcf8e3"></li> 
        <li class="color-swatch" data-change="select" data-color="#666" style="background-color: #dff0d8"></li> 
        <li class="color-swatch" data-change="select" data-color="#666" style="background-color: #f2dede"></li> 
       </ul> 
      </div> 
     </div> 
    </section>

<script>
$(function(){
  $('#editor-type-pop').popover({
    trigger: 'hover'
  });
});

var unstrip_space_line_style = true; // 保留空行粘贴内容的样式，为false时空行粘贴纯文本


function strip_stack_span(html){ // 将层叠的上下级span标签合并，同时合并两者的style属性
  var docObj = $('<div>'+html+'</div>');
  var has_secspan = false;
  do
  {
    has_secspan = false;
    docObj.find('span:has(span)').each(function(i){
        var innerobj = $(this).find('span');
        if($.trim($(this).text()) == $.trim(innerobj.text())) {

          has_secspan = true;
          var style= $(this).attr('style');
          var innserstyle = innerobj.attr('style');
          $(this).attr('style',style +";"+innserstyle).html($(this).text());
        }
      });
  }while(has_secspan && docObj.find('span:has(span)').size() > 0);
  return docObj.html();
}

$(function(){
  $('#left-side-affix').width($('#left-sidebar').width());

  
  ckeditors['WxMsgContent'] = CKEDITOR.replace( 'WxMsgContent',
        {
            customConfig : './js/ckeditor/front-config.js',
            toolbar : 'ANONY',
            extraPlugins : 'autogrow',
            height:400,
            autoGrow_minHeight : 400,
            format_p : { element: 'p', styles: { 'text-indent': '2em' } }
        });
  
  window.onbeforeunload = function(event){   
    if(ckeditors['WxMsgContent'].getData() != ""){   
      event.returnValue = "即将离开页面，是否确认编辑的内容已使用？";   
    }   
  } 
  CKEDITOR.on( 'instanceReady', function( e ){
    /*e.editor.document.appendStyleSheet( '/stylevars/getcss.css' );
    e.editor.document.appendStyleSheet( '/css/ui-customer.css' );
    //e.editor.setMode( 'source' );
    e.editor.on( 'mode', function( e ){
      if(e.editor.mode == 'wysiwyg'){
        e.editor.document.appendStyleSheet( '/stylevars/getcss.css' );
        e.editor.document.appendStyleSheet( '/css/ui-customer.css' );
      }
    });*/
    //$('.cke_top').css({'position':'inherit'});
    $('.cke_top').width($('.cke_top').width());
    $('.cke_top').addClass('clearfix').affix({offset:{top: 110}});

    e.editor.focus();
  });


  ckeditors['WxMsgContent'].on('paste', function( evt ) {
    // Update the text
      
      
      evt.data.dataValue = strip_stack_span(evt.data.dataValue);
      
      // alert(evt.data.dataValue);
      var pasteHtml = '<div>'+evt.data.dataValue+'</div>';
      var pasteObj = $(pasteHtml);
    if(pasteObj.find('img').size()>0){
      return ; //有图片时不处理
    }

    //h2,h3,h4,h5,h6
      if(pasteObj.find('div,section,video,iframe,blockquote').size() > 0){
        if(pasteObj.find('[style]').size()>0) {
          return ; //含有块级元素，且包含style属性时，不处理
        }
      }
      

      // var selectedText = evt.editor.getSelection().getSelectedText();

      var element = evt.editor.getSelection().getStartElement();
    
    var nodeName = element.getName();
    if(nodeName=='blockquote' || nodeName=='pre' || nodeName=='section'){
      evt.data.dataValue = pasteObj.text();
      return;
    }
    if(unstrip_space_line_style && $.trim(element.getText()) == ""){
      return; //对于空的元素，保留原文的格式
    }
    
    //if(element.getName() =='p' || element.getName() =='div' || element.getName() =='span')
    {
      var cssText = element.getAttribute('style');
      //pasteObj.find('br').removeAttr('style').removeAttr('class');
      if(pasteObj.find('*').size() > 1){
        pasteObj.find('br,div,p').after("===BR===");  //纯文本，仅保留换行
      }
      
      var text = pasteObj.text();
      text = text.replace(/\=\=\=BR\=\=\=/g, "<br>");
      
      if(cssText==null || cssText==""){
        evt.data.dataValue = '<'+nodeName+'>'+ text +'</'+nodeName+'>';
      }
      else{
        evt.data.dataValue = '<'+nodeName+' style="'+cssText+'">'+ text +'</'+nodeName+'>';
      }
      // var style = new CKEDITOR.style( { element: element.getName(), styles: cssText} );
      // ckeditors['WxMsgContent'].applyStyle( style );
    }

  }, ckeditors['WxMsgContent'].element.$);


  ckeditors['WxMsgContent'].focus();


  $('.editor-style-list li').click(function(){
    var styles = $(this).data('style');
    //alert(style_str)
    //var styles = jQuery.parseJSON(style_str);
    set_style(styles);

  });

  $('.editor-template-list li').click(function(){
    insertHtml("<p>&nbsp;</p>" + $(this).html() + "<p>&nbsp;</p>"); //多插入一个空行，防止有时无法选择到底部了
  });

  $('.color-swatch').click(function(){
    $('.color-swatch').removeClass('active');
    $(this).addClass('active');
    var color = $(this).data('color'); //data-color为前景色，bgcolor为背景色，或者无背景文字的前景色
    if(!color)  color = '#FFF';
    setBackgroundColor($(this).css('backgroundColor'),color,$(this).data('change'));
  });

});

var custom_style_set = false;
var current_select_bgcolor = null;
var current_select_color = '#FFF';

function setBackgroundColor(bgcolor,color,changeType){

  current_select_bgcolor = bgcolor;
  current_select_color = color;
  var range = ckeditors['WxMsgContent'].getSelection().getRanges()[ 0 ],
      el = ckeditors['WxMsgContent'].document.createElement( 'div' );
  if(range){
    el.append( range.cloneContents() );
    var html = el.getHtml();
    if(html != ""){
      custom_style_set = true;
      range.deleteContents();
      var newHtml = parseHtml(html,bgcolor,color);
      ckeditors['WxMsgContent'].insertHtml(newHtml);
      html = null; newHtml = null;
      return;
    }
  }
  

  if(changeType == 'select'){
    alert("浅色颜色不支持全文调色，选选择要调色的部分内容(可手动全选后调色)");
    return ;
  } 
  else if(!custom_style_set || custom_style_set && confirm("进行过部分区域设色，是否放弃并全部重设")){
    var html = ckeditors['WxMsgContent'].getData(); 
    var newHtml = parseHtml(html,bgcolor,color);
    ckeditors['WxMsgContent'].setData(newHtml);
    html = null; newHtml = null;
    custom_style_set = false;
  }
  return;
}

function parseHtml(html,bgcolor,color){
  var obj = $('<div id="editor-content">'+html+"</div>");
  obj.find("*").each(function() {

    if(this.nodeName == "" || this.nodeName== "TD" || this.nodeName== "STRONG") {
      return ; // 类型为空或者td时，不处理
    }

    setColor(this,'borderBottomColor',bgcolor);
      setColor(this,'borderTopColor',bgcolor);
      setColor(this,'borderLeftColor',bgcolor);
      setColor(this,'borderRightColor',bgcolor);      

    
    if($(this).data('ct')=='fix'){
        return ; // data-ct=fix固定颜色
      }

      var bgimg = $(this).css('backgroundImage');
      //-webkit-linear-gradient(left, rgb(250, 235, 255), rgb(255, 255, 250), rgb(250, 235, 255))
      if(bgimg.substring(0,30) == '-webkit-linear-gradient(left, '){
        var colors = bgimg.substring(30 , (bgimg.length-1) );

        var color_arr = colors.split('),');
        if(color_arr.length ==3) {
        $(this).css('backgroundImage','-webkit-linear-gradient(left, '+bgcolor+', #ffffdc, '+bgcolor+')');
        $(this).css('color','#333');
        }
        else if(color_arr.length ==2) {
        $(this).css('backgroundImage','-webkit-linear-gradient(left, '+bgcolor+', #ffffdc)');
        $(this).css('color','#333');
        }
        return;
      }


      var bgC = $(this).css('backgroundColor');
      if (bgC==='initial' || bgC === 'transparent' || bgC === "") {
        var fc = $(this).css('color');
        if(fc && fc != "" && fc != 'inherit' && !isGreyColor(fc)) {
            $(this).css('color',bgcolor);
        }
      } else {
        //var bgC_hex = rgb2hex(bgC);
        if(!isGreyColor(bgC)){
          $(this).css('backgroundColor',bgcolor);
            if(color && !isGreyColor(color) ) {
              $(this).css('color',color);
            }
        }
        else{
          var fc = $(this).css('color');
          if(fc && fc != "" && fc != 'inherit' && !isGreyColor(fc)) {
              $(this).css('color',bgcolor);
          }
        }
      }
  });
  var result = obj.html();
  obj=null;
  return result;
}

function setColor(obj,colorType,color){
  var c = $(obj).css(colorType);
    if (c === 'transparent') {
      return;
    } else {
      if(!isGreyColor(c)){
        $(obj).css(colorType,color);
      } 
    }
}

function rgb2hex(color){
 rgb = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
 return (rgb && rgb.length === 4) ? "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : color;
}

function isGreyColor(color){
  var c = rgb2hex(color);
  var r = ""+c.substring(1,3);
  var g = ""+c.substring(3,5);
  var b = ""+c.substring(5,7);
  if(r==g && g==b ){ // && r>"dd"    || r>"dd" && g > "dd" && b > "dd"
    return true;
  }
  else{
    return false;
  }
}

//alert(rgb2hex('rgb(249, 110, 87)'));


function insertHtml(html){
  var oEditor = ckeditors['WxMsgContent'];
  // Check the active editing mode.
  if (oEditor.mode == 'wysiwyg' ){
    // Insert the desired HTML.
    if(current_select_bgcolor){
       html = parseHtml(html,current_select_bgcolor,current_select_color);
    }
    oEditor.insertHtml(html);
  }
  else{
    alert($.jslanguage.wysiswyg_mode );
  }
}

function set_style(styles){
  //ckeditors['WxMsgContent'].focus();
  //ckeditors['WxMsgContent'].execCommand('selectAll');

  ckeditors['WxMsgContent'].execCommand('removeFormat');
   
  // 应用到编辑器的单项
  var style = new CKEDITOR.style( { element: 'p', styles: styles} );
  ckeditors['WxMsgContent'].applyStyle( style );

  //应用到全部内容，会修改后重置，撤销操作会失效
  /*var html = ckeditors['WxMsgContent'].getData(); 
  var obj = $('<div id="editor-content">'+html+"</div>");
  obj.find(selector).each(function(){
    $(this).removeAttr('style');
    $(this).css(styles);
  });
  ckeditors['WxMsgContent'].setData(obj.html());*/

}
</script> 
<script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/jquery.masonry.min.js"></script> 
<script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/jquery.mixitup.min.js"></script> 
<script>  
  $(function(){
    var masonryed = false;
      $('.editor-template-list').mixItUp({
        layout:{display:'block'},
        callbacks:{
          onMixEnd: function(state){
            var $container = $('#editor-templates .editor-template-list');
            if(masonryed){
              $container.masonry( 'destroy' );  
            }         
              $container.masonry({
                  itemSelector: '.col-xs-6:visible',
                  animate: true,       
                  animationOptions: {
                      duration: 400,
                      easing: 'linear',
                      queue: false
                  }
              });
              masonryed = true;
          }
        }
      });
  });
  
</script> 
<script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/ZeroClipboard.min.js"></script> 
<script>
ZeroClipboard.config( { swfPath: "/sites/all/modules/wxeditor/beautify_editor_files/js/ZeroClipboard/ZeroClipboard.swf" } );

$(function(){
  $('#clear-editor').click(function(){
    if(confirm('是否确认清空内容，清空后内容将无法恢复')){
      ckeditors['WxMsgContent'].setData("");
    }   
  });
  $('#html-to-image').click(function(){
    this.form.action = '/downloads/htmlToImage';
    this.form.submit();
  });
  var client = new ZeroClipboard( $('#copy-editor-html') );
    client.on( 'ready', function(event) {
    client.on( 'copy', function(event) {
        event.clipboardData.setData('text/html', ckeditors['WxMsgContent'].getData());
        event.clipboardData.setData('text/plain', ckeditors['WxMsgContent'].getData());
        //event.clipboardData.setData('text/plain', ckeditors['WxMsgContent'].document.getBody().getText());
        showSuccessMessage("已成功复制到剪切板");

        var obj = $('<div class="alert alert-success" role="alert">已成功复制到剪切板</div>').insertBefore('#copy-editor-html');
        setTimeout(function(){obj.remove();},3000);
    });
  });

  // client.on( 'error', function(event) {
  //  ZeroClipboard.destroy();
  // } );
})
</script> 
   </div> 
   <a href="#" id="toTop" style="display: none;"><span id="toTopHover"></span>To Top</a>
  </div>
  <!-- //end maincontent --> 
  <!--[if lte IE 6]>

  <script type="text/javascript" src="/js/bootstrap-ie.js"></script>
<![endif]--> 
  <!--  
  <div id="ajax_doing_help" title="提示" style="display:none;"></div>
--> 
  <script type="text/javascript" src="/sites/all/modules/wxeditor/beautify_editor_files/jquery.lazyload.min.js"></script> 
  <script type="text/javascript"> 
  $("img.lazy").lazyload({
      placeholder : "/img/grey.gif",
      effect: "fadeIn",
      threshold : 100
    });
  </script> 
  <div id="global-zeroclipboard-html-bridge" class="global-zeroclipboard-container" style="position: absolute; left: 0px; top: -9999px; width: 1px; height: 1px; z-index: 999999999;">
   <object id="global-zeroclipboard-flash-bridge" name="global-zeroclipboard-flash-bridge" width="100%" height="100%" type="application/x-shockwave-flash" data="/sites/all/modules/wxeditor/beautify_editor_files/js/ZeroClipboard/ZeroClipboard.swf?noCache=1414378439625">
   <param name="allowScriptAccess" value="sameDomain"></param>
   <param name="allowNetworking" value="all"></param>
   <param name="menu" value="false"></param>
   <param name="wmode" value="transparent"></param>
   <param name="flashvars" value="trustedOrigins=swfObjectId=global-zeroclipboard-flash-bridge"></param>
   </object>
  </div> 
 </body>
</html>